<template>
	<view class="application-item">
		<uni-section titleFontSize="16px" v-if="title" :title="title"></uni-section>
		<view class="application-item-content">
			<u-grid :border="false" @click="handleClick" col="4">
				<u-grid-item v-for="(item, index) in appList" :key="index" :name="item.path">
					<view class="grid-item">
						<image :src="getImageSrc(item)" class="grid-img"></image>
						<view class="grid-text">{{ item.name }}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script setup>
	// 卡片组件
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		appList: {
			type: Array,
			default: () => []
		}
	})
	const handleClick = (item) => {
		if (item) {
			if (item == '/pages/application/application') {
				uni.switchTab({
					url: item
				})
			} else {
				uni.navigateTo({
					url: item
				});
			}
		} else {
			uni.showModal({
				content: "页面开发中..."
			})
		}
	}
	const getImageSrc = ({
		icon,
		suffix
	}) => {
		return `/static/img/work/${icon}.${suffix ? suffix : 'png' }`
	};
</script>

<style lang="scss" scoped>
	.application-item {
		background: #fff;
		// box-shadow: 0 0 5px 2px #2172FC;
		margin-bottom: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10px;
		width: 100%;

		.application-item-title {
			color: $title-color;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: bold;
		}

		:deep(.uni-section-header) {
			padding: 0px !important;

			.uni-section-header__decoration.line {
				height: 16px;
			}

			.uni-section__content-title {
				color: #272C35 !important;
				font-weight: bold;
			}
		}

		.application-item-content {
			box-sizing: border-box;
			margin-top: 20rpx;
			margin-bottom: -14px;

			.grid-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 160rpx;
				width: 100%;

				.grid-img {
					width: 100rpx;
					height: 100rpx;
				}

				.grid-text {
					flex: 1;
					color: $text-color;
					font-size: 12px;
					text-align: center;
					width: 80%;
				}
			}
		}
	}

	:deep(.u-badge) {
		position: relative;
		animation: badgeAni 2s cubic-bezier(.1, .25, 1, .25) forwards;
		pointer-events: auto
	}

	.tip {
		font-size: 12px;
		color: gainsboro;
		position: absolute;
		top: -10px;
		right: 0px;
	}

	@keyframes overly {
		from {
			transform: rotate(0deg);
		}

		4% {
			transform: rotate(5deg);
		}

		12.5% {
			transform: rotate(-5deg);
		}

		21% {
			transform: rotate(5deg);
		}

		29% {
			transform: rotate(-5deg);
		}

		37.5% {
			transform: rotate(5deg);
		}

		46% {
			transform: rotate(-5deg);
		}

		50%,
		to {
			transform: rotate(0deg);
		}
	}

	@keyframes badgeAni {
		0% {
			z-index: 100;
		}

		50% {
			z-index: 1000;
		}

		100% {
			z-index: 119999;
		}
	}
</style>